<template>
  <!--商品推荐-->
  <div>
    <van-cell :title="title" icon="gift-o">
    </van-cell>
    <div class="van-row van-row--flex van-row--justify-center">
      <van-col class="goods-item van-col--7" v-for="(item,i) in list" :key="i"
        @click="handleClick(item.goodid)">
        <!--图片-->
        <van-image :src="item.imgurl" style="width: 100px; height: 100px; margin: auto;"></van-image>
        <!--商品名称-->
        <div class="van-ellipsis">{{item.spec}}</div>
        <!--单价-->
        <div class="price">￥{{item.price}}</div>
      </van-col>
    </div>
  </div>
</template>

<script>
  import {
    List
  } from 'vant';
  export default {
    name: 'homeGoods',
    props: {
      list: Array,
      title: String,
    },
    methods: {
      handleClick(goodsid) {
        this.$router.push("/goodsdetail?goodsid=" + goodsid);

      }
    }
  }
</script>

<style scoped>
  .goods-block {
    background-color: #f0f1f4;
  }

  .van-cell {
    font-size: 16px;
    background-color: lightgray;
  }

  .goods-item {
    display: flex;
    flex-direction: column;
    background-color: #fafcff;
    margin: 5px;
    padding: 5px;
    border-radius: 10px;
    /*border:thin solid red ;*/


    font-size: 14px;
  }

  .price {
    font-size: 18px;
    font-weight: bold;
    color: red;
    text-align: right;
  }
</style>
